<template>
	<!-- H5+APP端 -->
	<!-- #ifdef APP-PLUS || H5 -->
	<component :is="present" ref="comp"></component>
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<pageHome :style="[displayModule(0)]" />
	<!-- 会员模板 -->
	<pageVip :style="[displayModule(1)]" />
	<!-- 生态共建 -->
	<pageZoology :style="[displayModule(2)]" />
	<!-- 我的页面 -->
	<pageMine :style="[displayModule(3)]" />
	<!-- #endif -->
	<global-tabbar/>
</template>
<script setup lang="ts">
	import { markRaw, ref, shallowRef, watch } from 'vue';
	import globalTabbar	from '@/components/global-tabbar/index.vue';
	import { global } from '@/store';
	import { vibrateShort } from '@/utils/function';
	// 首页
	import pageHome from '@/pages/page/home/index.vue';
	// 生态共建
	import pageZoology from '@/pages/page/zoology/index.vue';
	// 关于我们
	import pageMine from '@/pages/page/mine/index.vue';
	// 会员模板
	import pageVip from '@/pages/page/vip/index.vue';
	const { state } = global();
	// #ifdef APP-PLUS || H5
	// 设置动态组件
	let present : any = shallowRef(pageHome);
	const comp = ref(null);
	const componentList = [
		markRaw(pageHome),
		markRaw(pageVip),
		markRaw(pageZoology), 		
		markRaw(pageMine)
	];
	const init = () => {
		present.value = componentList[state.current];
	}
	
	init();
	// #endif
	// 监听是否发生改变
	watch(() => state.current, (newValue) => {
		vibrateShort();
		// #ifdef APP-PLUS || H5
		present.value = componentList[newValue];
		// #endif
	})
	// #ifdef MP-WEIXIN
	// 是否隐藏
	const displayModule = (index: number): any => {
	  let style: any = {};
	  if (state.current !== index) {
	    style.display = 'none';
	  }
	  return style
	};
	// #endif
</script>
<style lang="scss" scoped>
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.counter {
		font-size: 36rpx;
	}

	.operation {
		margin-top: 50rpx;
	}
</style>